//================代码================================
var contactTag='1'; // 1POS登记列表 || 2大POS申请记录
var timer=null; // 定时器
var clipboard
/**
 * 初始化滚动
 */
mui('#pullrefresh1').scroll({
    deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
});

/**
 * 重置
 */
function mercReset(){
    mui('#pullrefresh1.mui-scroll-wrapper').scroll().scrollTo(0,0,100);//100毫秒滚动到顶
    setTimeout(()=>{
        var $table = document.body.querySelector('#pullrefresh1 .mui-table-view');
        $table.innerHTML = '';
        loadMerc()
    },500)

}

/**
 *  加载列表
 */
function loadMerc() {
    // return;
    var $table = document.body.querySelector('#pullrefresh1 .mui-table-view');
    setTimeout(()=>{
        for(var i=0;i<10;i++){
            var li = document.createElement('li');
            li.className = 'mui-table-view-cell ';
            li.innerHTML = `<div class="mui-slider-handle"><div class="mui-row">
                    <div class="mui-col-xs-3">姓名：</div>
                    <div class="mui-col-xs-3 gary">陈鹏</div>
                    <div class="mui-col-xs-3">联系方式：</div>
                    <div class="mui-col-xs-3 gary">13032323321</div>
                </div>
                
                <div class="mui-row">
                    <div class="mui-col-xs-3">首次达标：</div>
                    <div class="mui-col-xs-3 gary">是</div>
                    <div class="mui-col-xs-3">二次达标</div>
                    <div class="mui-col-xs-3 gary">否</div>
                </div>
                <div class="mui-row">
                    <div class="mui-col-xs-3">序列号：</div>
                    <div class="mui-col-xs-9 gary">
                        8967677676767 
                    </div>
                    <!--要复制的内容-->
                    <input style="position: absolute;right:1000px;" id="${'input'+i}" type="text" value="${i+"_"+Math.random()}">
                </div></div>
                 <div class="mui-slider-right mui-disabled">
                    <a ids="${'input'+i}" tag="1" class="mui-copy mui-btn mui-btn-grey mui-icon ">复制</a>
                    <a tag="2" class="mui-btn mui-btn-yellow mui-icon ">修改</a>
                    <a tag="3" class="mui-btn mui-btn-red mui-icon ">删除</a>
                </div>`;
            $table.appendChild(li)
        }
        bindMercClick();
    },500);
}

/**
 * 事件绑定：商户
 */
function bindMercClick(){

    // 查看交易记录
    mui(".mui-table-view-cell").on('tap','.mui-row',function () {
        console.log("yyyyyy")
        // 返回按钮
        mui("#backBtn")[0].style.display = 'none';
        mui("#prevBtn2")[0].style.display = 'block';
        // 搜索
        mui("#slist")[0].style.display = 'none';
        // 商户列表
        mui("#segmentedControlbox")[0].style.display = 'none';
        mui(".filter")[0].style.display = 'none';
        mui("#pullrefresh1")[0].style.display = 'none';
        // 交易记录
        mui("#list")[0].style.display = 'block';
        var $views = mui("#list .mui-table-view ")[0];
        $views.innerHTML = ``;
        setTimeout(()=>{
            for(var i=0;i<5;i++){
                var li = document.createElement('li');
                li.className = 'mui-table-view-cell ';
                li.innerHTML = `2019-09-09 <span class="pull-right">100.90</span>`;
                $views.appendChild(li)
            }
            bindListClick();
        })
    });
    /**
     * 事件绑定：交易记录
     */
    function  bindListClick() {
        mui("#list .mui-table-view ").on('tap','li',function () {
            // 返回按钮
            mui("#backBtn")[0].style.display = 'none';
            mui("#prevBtn2")[0].style.display = 'none';
            mui("#prevBtn3")[0].style.display = 'block';
            // 商户列表
            mui("#segmentedControlbox")[0].style.display = 'none';
            mui(".filter")[0].style.display = 'none';
            mui("#pullrefresh1")[0].style.display = 'none';
            // 交易记录
            mui("#list")[0].style.display = 'none';
            // 交易明细
            mui("#detail")[0].style.display = 'block';
        })
    }

    // 对列表的三个操作
    mui(".mui-slider-right").on('tap',".mui-btn",function () {
        var tag = this.getAttribute('tag'); // 1,2,3
        console.log('tag',tag)
        // 删除
        if(tag=='3'){
            mui.alert("删除")
        }
        // 修改
        if(tag == '2'){
            if(contactTag=='1'){
                 // 1POS登记列表
                location.href = "mechant_mpos_edit.html";
            }else{
                // 2大POS申请记录
                location.href = "mechant_ctpos_edit.html";
            }
        }
        /*复制*/
        if(tag== '1'){
            var id= this.getAttribute("ids");
            var $id=mui("#"+id)[0];
            $id.select(); // 选择对象
            document.execCommand("Copy"); // 执行浏览器复制命令
            // mui.alert("已复制好，可粘贴。");
            mui.alert("复制成功");
        }
    })

}

mui.ready(function () {
    // 加载通讯录
    loadMerc();

    // 通讯录切换
    mui("#segmentedControl").on("tap","a",function () {
        var tagIndex = this.getAttribute('tag'); // 1POS登记列表 || 2大POS申请记录
        console.log('tabs',tagIndex)
        contactTag = tagIndex;
        if(tagIndex == "2"){
            mui("#pmt__iconbtn")[0].style.display = 'none';
        }else{
            mui("#pmt__iconbtn")[0].style.display = 'block';
        }
        // 重置
        mercReset();
    })

    // 交易记录 返回 商户列表
    mui(".mui-bar").on('tap','#prevBtn2',function () {
        // 返回按钮
        mui("#backBtn")[0].style.display = 'block';
        mui("#prevBtn2")[0].style.display = 'none';
        // 商户列表
        mui("#segmentedControlbox")[0].style.display = 'block';
        mui(".filter")[0].style.display = 'block';
        mui("#pullrefresh1")[0].style.display = 'block';
        // 交易记录
        mui("#list")[0].style.display = 'none';
    })

    // 交易明细 返回 交易记录
    mui(".mui-bar").on('tap','#prevBtn3',function () {
        // 返回按钮
        mui("#backBtn")[0].style.display = 'none';
        mui("#prevBtn2")[0].style.display = 'block';
        mui("#prevBtn3")[0].style.display = 'none';
        // 交易记录
        mui("#list")[0].style.display = 'block';
        // 详情
        mui("#detail")[0].style.display = 'none';
        // 商户列表
        mui("#segmentedControlbox")[0].style.display = 'none';
        mui(".filter")[0].style.display = 'none';
        mui("#pullrefresh1")[0].style.display = 'none';
    })
    
    // 搜索
    mui(".mui-bar").on("tap","#pmt__iconbtn",function () {
        mui("#segmentedControlbox")[0].style.display = 'none';
        mui(".filter")[0].style.display = 'none';
        mui("#pullrefresh1")[0].style.display = 'none';
        mui("#list")[0].style.display = 'none';
        mui("#detail")[0].style.display = 'none';
        mui("#slist")[0].style.display = 'block';
    })
});

/**
 * 搜索
 */
function search(){
    var key = mui("#key")[0].value;
    var $table = document.body.querySelector('#slist .mui-table-view');
    clearTimeout(timer);
    if(!key){
        $table.innerHTML = "";
        return;
    }
    timer = setTimeout(()=>{
        $table.innerHTML = "";
        for(var i=0;i<3;i++){
            var li = document.createElement('li');
            li.className = 'mui-table-view-cell';
            li.innerHTML = `<div class="mui-row">
                    <div class="mui-col-xs-3">姓名：</div>
                    <div class="mui-col-xs-3 gary">陈鹏</div>
                    <div class="mui-col-xs-3">联系方式：</div>
                    <div class="mui-col-xs-3 gary">13032323321</div>
                </div>
                <div class="mui-row">
                    <div class="mui-col-xs-3">序列号：</div>
                    <div class="mui-col-xs-9 gary">8967677676767</div>
                </div>
                <div class="mui-row">
                    <div class="mui-col-xs-3">首次达标：</div>
                    <div class="mui-col-xs-3 gary">是</div>
                    <div class="mui-col-xs-3">二次达标</div>
                    <div class="mui-col-xs-3 gary">否</div>
                </div>`;
            $table.appendChild(li)
        }
        bindMercClick();

    },1000)
    console.log("xxxxxxxxx",key)
}
